<template>
    <div class="container">
        <div class="content">
            <div class="title">
                医疗问答系统
                <div class="iconMenu">
                    <a-dropdown>
                        <user-outlined/>
                        <template #overlay>
                            <a-menu>
                                <a-menu-item>
                                    <a-button type="text" @click="handleLogout">退出登录</a-button>
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </div>
            </div>
            <div class="box">
                <div class="menuArea">
                    <div :class="['menuItem', {active: $route.name === x.name}]" v-for="x of menuList"
                         @click="toPage(x.name)">
                        {{ x.title }}
                    </div>
                </div>
                <div class="pageArea">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {UserOutlined} from '@ant-design/icons-vue'
import {logout} from "../service.js";

export default {
    name: "Home",
    components: {
        UserOutlined
    },
    data() {
        return {
            visible: true,
            menuList: [
                {title: '个人信息管理', name: 'my'},
                {title: '医疗问答', name: 'faq'},
                {title: '历史问答记录', name: 'faqHistory'},
            ]
        }
    },
    methods: {
        toPage(name) {
            this.$router.push({name});
        },
        async handleLogout() {
            const res = await logout();
            this.$router.push({name: 'login'});
            localStorage.clear();
        }
    }
}
</script>

<style scoped lang="less">
.container {
  background: #fafafa;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.title {
  font-size: 24px;
  height: 60px;
  min-height: 60px;
  font-weight: bolder;
  line-height: 1;
  background: hsl(208, 56%, 46%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  padding: 0 32px;
}

.box {
  flex-grow: 1;
  display: flex;
  background: #fff;
  border-radius: 4px;
  box-shadow: 2px 2px 5px -1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.menuArea {
  background: #f0f7ff;
  padding: 24px 12px;
  border-right: 4px solid hsl(208, 56%, 46%);
}

.pageArea {
  padding: 24px;
  flex-grow: 1;
  overflow: hidden;
}

.menuItem {
  padding: 12px;
  width: 200px;
  transition: all .3s;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  font-size: 16px;

  &.active {
    background: hsl(208, 56%, 46%);
    color: #fafafa;
  }

  &:hover {
    background: hsl(208, 56%, 56%);
    color: #fafafa;
  }
}

.menuItem + .menuItem {
  margin-top: 12px;
}

.iconMenu {
}
</style>